<template>
  <yin-login-logo></yin-login-logo>
  <div class="sign">
    <div class="sign-head">
      <span>欢迎登录</span>
    </div>
    <el-tabs v-model="activeName" type="border-card" tab-position="top">
      <el-tab-pane label="验证码登录" name="first">
        <el-form ref="signInFormByPhoneCode" status-icon :model="phoneCodeForm" :rules="SignInByCodeRules">
          <el-form-item prop="phoneNum">
            <el-input placeholder="手机号码" v-model="phoneCodeForm.phoneNum"></el-input>
          </el-form-item>
          <el-form-item prop="checkCode">
            <el-col :span="11" :offset="0">
              <el-input type="text" placeholder="请输入验证码" v-model="phoneCodeForm.checkCode"></el-input>
            </el-col>
            <el-col :span="2" :offset="0"></el-col>
            <el-col :span="11">
              <el-button style="width:100%" type="primary" @click="handleSendCode" :disabled="issend" >
                {{ countdown > 0 ? countdown + '秒后重新发送' : '发送验证码' }}
              </el-button>
            </el-col>
          </el-form-item>
          <el-form-item class="sign-code-btn">
            <el-button type="primary" @click="handleLoginInByCode">登录/注册</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="账号密码登录" name="second">
        <el-form ref="signInForm" status-icon :model="registerForm" :rules="SignInRules">
          <el-form-item prop="username">
            <el-input placeholder="用户名" v-model="registerForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" v-model="registerForm.password"
              @keyup.enter="handleLoginIn"></el-input>
          </el-form-item>
          <el-form-item class="sign-btn">
            <el-button @click="handleSignUp">注册</el-button>
            <el-button type="primary" @click="handleLoginIn">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="邮箱登录" name="third">
        <el-form ref="signInFormByEmailCode" status-icon :model="emailCodeForm" :rules="SignInByCodeRules">
          <el-form-item prop="emailNum">
            <el-input placeholder="邮箱号码" v-model="emailCodeForm.emailNum"></el-input>
          </el-form-item>
          <el-form-item prop="checkCode">
            <el-col :span="11" :offset="0">
              <el-input type="text" placeholder="请输入验证码" v-model="emailCodeForm.checkCode"></el-input>
            </el-col>
            <el-col :span="2" :offset="0"></el-col>
            <el-col :span="11">
              <el-button style="width:100%" type="primary" @click="handleSendEmail" :disabled="issend" >
                {{ countdown > 0 ? countdown + '秒后重新发送' : '发送验证码' }}
              </el-button>
            </el-col>
          </el-form-item>
          <el-form-item class="sign-code-btn">
            <el-button type="primary" @click="handleLoginInByEmail">登录/注册</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-row :gutter="20" class="otherway">
      <el-col :span="8" :offset="0"><el-button type="primary" size="default" class="btn">其它方式：</el-button></el-col>
      
      <el-col :span="5" :offset="0">
        <el-button type="primary" size="default" class="btn">
          <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Wechat24"><path fill="#07C160" d="M20.314 18.59c1.333-.968 2.186-2.397 2.186-3.986 0-2.91-2.833-5.27-6.325-5.27-3.494 0-6.325 2.36-6.325 5.27 0 2.911 2.831 5.271 6.325 5.271.698.001 1.393-.096 2.064-.288l.186-.029c.122 0 .232.038.336.097l1.386.8.12.04a.21.21 0 0 0 .212-.211l-.034-.154-.285-1.063-.023-.135a.42.42 0 0 1 .177-.343ZM9.09 3.513C4.9 3.514 1.5 6.346 1.5 9.84c0 1.905 1.022 3.622 2.622 4.781a.505.505 0 0 1 .213.412l-.026.16-.343 1.276-.04.185c0 .14.113.254.252.254l.146-.047 1.663-.96a.793.793 0 0 1 .403-.116l.222.032c.806.231 1.64.348 2.478.348l.417-.01a4.888 4.888 0 0 1-.255-1.55c0-3.186 3.1-5.77 6.923-5.77l.411.011c-.57-3.02-3.71-5.332-7.494-5.332Zm4.976 10.248a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001Zm4.217 0a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001ZM6.561 8.827a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Zm5.061 0a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Z" clip-rule="evenodd"></path></svg>
        </el-button>
      </el-col>
      <el-col :span="5" :offset="0">
        <el-button type="primary" size="default" class="btn">
          <img :src="aliLogo"  fit="fill" :lazy="true" width="24" height="24"/>
          
        </el-button>
      </el-col>
      <el-col :span="5" :offset="0">
        <el-button type="primary" size="default" class="btn">
          <svg t="1687607198083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1614" width="24" height="24"><path d="M867.1232 25.6h-91.1872a29.184 29.184 0 0 0-21.504 9.5232 33.28 33.28 0 0 0-8.9088 22.9376c0 8.2944 2.9696 16.5376 8.9088 22.8864a29.184 29.184 0 0 0 21.504 9.5232h91.1872v97.28a33.28 33.28 0 0 0 8.9088 22.9376 29.184 29.184 0 0 0 43.008 0 33.28 33.28 0 0 0 8.8576-22.9376v-97.28c0-35.84-27.2384-64.8704-60.7744-64.8704z m30.3616 486.4a30.1568 30.1568 0 0 0-30.3616 30.3616v91.1872h-91.1872a30.1568 30.1568 0 0 0-21.504 8.96c-1.6384 1.5872-2.5088 3.6864-3.6864 5.632-34.304-33.024-72.8576-60.16-115.5072-78.1824 86.6304-51.7632 141.4656-151.296 124.6208-263.168-15.872-104.96-97.28-192.6656-201.1648-214.3744a273.408 273.408 0 0 0-56.32-5.888 260.4544 260.4544 0 0 0-260.5568 260.5568c0 95.0784 51.5584 177.5104 127.6416 222.976-42.5472 18.0224-81.2032 45.1584-115.5072 78.1824-1.1264-1.9456-2.048-4.0448-3.6864-5.632a30.1568 30.1568 0 0 0-21.504-8.9088h-91.136v-91.2384a30.1568 30.1568 0 0 0-8.96-21.504 30.1568 30.1568 0 0 0-21.504-8.9088 30.1568 30.1568 0 0 0-30.3616 30.464v91.136c0 33.536 27.2896 60.8256 60.8256 60.8256H212.48a488.1408 488.1408 0 0 0-97.1264 240.2304 57.344 57.344 0 0 0 56.9856 63.744h660.0192a57.344 57.344 0 0 0 56.9856-63.744 487.7312 487.7312 0 0 0-97.1264-240.3328h74.8544c33.5872 0 60.8256-27.2896 60.8256-60.8256v-91.2384A30.1568 30.1568 0 0 0 897.536 512V512zM107.264 220.16a29.184 29.184 0 0 0 21.504-9.472 33.28 33.28 0 0 0 8.8576-22.9376v-97.28H228.864a29.184 29.184 0 0 0 21.504-9.5232 33.28 33.28 0 0 0 8.8576-22.8864 33.28 33.28 0 0 0-8.9088-22.9376 29.184 29.184 0 0 0-21.504-9.5232H137.6256C103.9872 25.6 76.8 54.6304 76.8 90.4704v97.28c0 8.3456 2.9184 16.4864 8.9088 22.9376a29.184 29.184 0 0 0 21.504 9.472h0.0512z" fill="#F9A14D" p-id="1615"></path><path d="M51.2 281.6h921.6V358.4H51.2z" fill="#F9A14D" p-id="1616"></path></svg>
        </el-button>
      </el-col>
    </el-row>
    
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, getCurrentInstance, ref } from "vue";
import mixin from "@/mixins/mixin";
import YinLoginLogo from "@/components/layouts/YinLoginLogo.vue";
import { HttpManager } from "@/api";
import { NavName, RouterName, SignInRules , SignInByCodeRules} from "@/enums";
export default defineComponent({
  components: {
    YinLoginLogo,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const { routerManager, changeIndex } = mixin();
    const activeName = ref('first')
    const countdown = ref(0)
    const timer = ref(null)
    const issend=ref(false)

    const aliLogo = new URL('../assets/images/aliLogo.png',import.meta.url).href;
    // 登录用户名密码
    const registerForm = reactive({
      username: "",
      password: "",
    });
    // 登录短信验证码
    const phoneCodeForm = reactive({
      phoneNum: "",
      checkCode: "",
    });

    async function handleLoginIn() {
      let canRun = true;
      (proxy.$refs["signInForm"] as any).validate((valid) => {
        if (!valid) return (canRun = false);
      });
      if (!canRun) return;


      try {
        const username = registerForm.username;
        const password = registerForm.password;
        const result = (await HttpManager.signIn({ username, password })) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });       
        if (result.success) {
         
          proxy.$store.commit("setUserId", result.data.res[0].id);
          proxy.$store.commit("setUsername", result.data.res[0].username);
          proxy.$store.commit("setUserPic", result.data.res[0].avator);
          proxy.$store.commit("setToken", true);
          changeIndex(NavName.Home);
          routerManager(RouterName.Home, { path: RouterName.Home });

           //从请求头中获取authorization的值即token
          const token = result.data.token.authorization; 
          localStorage.setItem('token', token);
        }
      } catch (error) {
        console.error(error);
      }
    }

    function handleSignUp() {
      routerManager(RouterName.SignUp, { path: RouterName.SignUp });
    }

    async function handleSendCode() {
      if(phoneCodeForm.phoneNum.length==0)return false;
      //倒计时
      issend.value=true;
      countdown.value = 59;
      timer.value = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--;
        } else {
          clearInterval(timer.value);
          timer.value = null;
          issend.value=false;
        }
      }, 1000);
      try {
        const phoneNum = phoneCodeForm.phoneNum;
        const result = (await HttpManager.sendPhoneCode(phoneNum)) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
      } catch (error) {
        console.error(error);
      }
    }

    async function handleLoginInByCode() {
      let canRun = true;
      (proxy.$refs["signInFormByPhoneCode"] as any).validate((valid) => {
        if (!valid) return (canRun = false);
      });
      if (!canRun) return;
      try {
        const phoneNum = phoneCodeForm.phoneNum;
        const checkCode = phoneCodeForm.checkCode;
        const result = (await HttpManager.signInByPhoneCode({ phoneNum, checkCode })) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
        console.log(result);
        if (result.success) {
          console.log("登录成功")
          
         

          proxy.$store.commit("setToken", true);
          changeIndex(NavName.Home);
          routerManager(RouterName.Home, { path: RouterName.Home });

          clearInterval(timer.value);
          timer.value = null;
          issend.value = false;
        }
      } catch (error) {
         console.error(error);
      }
    }

     // 登录邮箱验证码
    const emailCodeForm = reactive({
      emailNum: "",
      checkCode: "",
    });

    async function handleSendEmail() { 
          
      if (emailCodeForm.emailNum.length == 0) { 
         (proxy as any).$message({
          message: "邮箱不能为空",
          type: "error",
        }); 
        return false;
      }
      //倒计时
      issend.value = true;
      countdown.value = 59;
      timer.value = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--;
        } else {
          clearInterval(timer.value);
          timer.value = null;
          issend.value = false;
        }
      }, 1000);
      try {
        const emailNum = emailCodeForm.emailNum;
        const result = (await HttpManager.sendEmailCode(emailNum)) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });
      } catch (error) {
        console.error(error);
      }
    }

    async function handleLoginInByEmail() {
      let canRun = true;
      (proxy.$refs["signInFormByEmailCode"] as any).validate((valid) => {
        if (!valid) return (canRun = false);
      });
      if (!canRun) return;
      try {
        const emailNum = emailCodeForm.emailNum;
        const checkCode = emailCodeForm.checkCode;
        const result = (await HttpManager.signInByEmailCode({ emailNum, checkCode })) as ResponseBody;
        (proxy as any).$message({
          message: result.message,
          type: result.type,
        });        
        if (result.success) {          
          
          proxy.$store.commit("setToken", true);
          changeIndex(NavName.Home);
          routerManager(RouterName.Home, { path: RouterName.Home });          
        }
      } catch (error) {
        console.error(error);
      }
    }


    return {
      registerForm,
      SignInRules,
      SignInByCodeRules,
      activeName,
      phoneCodeForm,
      countdown,
      issend,
      aliLogo,
      handleLoginIn,
      handleSignUp,
      handleSendCode,
      handleLoginInByCode,
      emailCodeForm,
      handleSendEmail,
      handleLoginInByEmail
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/sign.scss";
</style>
